<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的call方法</title>
</head>
<body>
    <script>
        /*
            this 如果是在普通函数里面 this 指向 window 对象.
                 如果这个函数被用做构造使用,this指向的创建的对象.
            call 函数的call方法.
                通过call方法改变当前函数的里面this对象.
                参数传递: call(对象,参数1,参数2,参数3.....)
                
        */
        function runer(a,b){
            //普通函数里面的this指向了 默认是window对象
            console.log(this);
            console.log('A+B',a+b);
        }
        var obj={
            age:18
        }
        //runer.call(obj,10,20);//执行了runer函数 并改变函数内部的this指向obj
        function People(){//人类
            this.name="Biden";
            this.age=78;
            this.run=function(){

            }
        }
        function Driver(){//司机类
            this.car="BenChi";
            //var obj=this;
            //People.call(obj);//改变People函数内部this指向 指向我们当前driver的this
            People.call(this);//执行了People函数 并改变它内部this指向, 指向driver 的this
            this.drive=function(){

            }
        }
        var d1=new Driver();
            console.log("d1的name",d1.name);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        div{
            width:500px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入查询产品的名称"/>
        <button>搜索</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>产品名称</th>
                    <th>产品价格</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>
    <script>
        var data=[
            {id:1,name:"华为",price:3500},
            {id:2,name:"荣耀",price:6500},
            {id:3,name:"小米",price:5500},
            {id:4,name:"红米",price:4500},
            {id:5,name:"oppo",price:3500},
            {id:6,name:"Iphone",price:4000},
            {id:7,name:"苹果",price:5000}
        ];
        var tbody=document.querySelector('tbody');
        renderData(data);//填充所有数组里面的数据到表格
        var button=document.querySelector('button');
        var input=document.querySelector('input');
                                button.onclick=function(){//点击搜索按钮
                                    search();
                                }
                                input.addEventListener('keyup',function(){
                                    search();
                                 });
        function search(){
            var pname=input.value;//鼠标点击的时候获取产品名称
                    var result=data.filter(function(value){//过滤数组 
                        if(value.name.indexOf(pname)>=0){//判断循环出来每一项里面的名称属性有没有 pname 如果有返回true. 存储 filter的返回数组里面
                            return true; //filter函数里面 如果返回true 该条结果存入返回数组里面
                        }
                        return false;//filter函数里面 如果返回false, 该条结果不存入返回数组里面
                    });
                    tbody.innerHTML='';//把原来tbody里面的html先清空
                    renderData(result);//把筛选的结果重新写入tbody
        }    
        /*
            把数组里面数据 组装成html tr td 添加到tbody
        */    
        function renderData(data){
            data.forEach(function(value){
                var tr=document.createElement('tr');
                var td1=document.createElement('td');
                    td1.innerText=value.id;
                    tr.appendChild(td1);
                var td2=document.createElement('td');
                td2.innerText=value.name;
                    tr.appendChild(td2);
                var td3=document.createElement('td');
                td3.innerText=value.price;
                    tr.appendChild(td3);
                tbody.appendChild(tr);
            });
        }

    </script>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function a(){
            this.name="james";
            this.age=36;
            this.chapion=function(){
                alert("湖人总冠军")
            }
        }
        function b(){
            this.wuhu=function(){
                alert("fmvp")
            }
        }

        b.prototype=new a();
             var c = new b ();
         console.log(b);
         console.log(a,c);
    </script>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var data=[
            {id:1,name:'james'},
            {id:2,name:'kd'},
            {id:3,name:'ad'}
        ]
        data.forEach(function(value,index){
         console.log('这是value',value, "这是index",index)
           
        });



        var data=[
            {id:1,name:'james',age:36},
            {id:2,name:'kd',age:31},
            {id:3,name:'ad',age:26}
        ];
        var arr2=data.filter(function(value,index,arr){
             return value.age>30
        })
        console.log(arr2);


        var data=[
            {id:1,name:'james',age:36},
            {id:2,name:'kd',age:31},
            {id:3,name:'ad',age:26}
        ];
        var result=data.some(function(value,index,arr){
             console.log(value)
             return value.age>20
             // return true;
        });
        console.log(result);
        
        


        







//         <!DOCTYPE html>
//  <html lang="en">
//  <head>
//      <meta charset="UTF-8">
//      <meta name="viewport" content="width=device-width, initial-scale=1.0">
//      <title>Document</title>
//     <style>
//         div{
//             width: 500px;   
//             margin: 0 auto;
//         }
//     </style>
//  </head>
//  <body>
//      <div>
//         <input type="text" placeholder="请输入要查找的内容">
//         <button>查找</button>
//         <br>
//         <table>
//             <thead>
//                 <tr>
//                     <th>编号</th>
//                     <th>产品名称</th>
//                     <th>产品价格</th>
//                 </tr>
//             </thead>
//             <tbody>
                
//             </tbody>
//         </table>
//     </div>
//     <script>

//         var input=document.querySelector("input");
//         var button=document.querySelector("button");
        
//         //封装函数
//             button.onclick=function(){
//                 search();
//             };
//             input.addEventListener("keyup",function(){
//                 search();
//             })
//             function search(){
//                 var pname = input.value;
//                 var result=data.filter(function(value){
//                     if(value.name.indexOf(pname)>=0){
//                     return true;
//                 }
//                 return false;
//                 })
//             tbody.innerHTML="";
//             renderData(result);   
//             }
                

//             // button.onclick=function(){
//             //     var pname = input.value;
//             //     var result=data.filter(function(value){
//             //         if(value.name.indexOf(pname)>=0){
//             //         return true;
//             //     }
//             //     return false;
//             //     })
//             // tbody.innerHTML="";
//             // renderData(result);   
//             // };
        


//         var data=[
//             {id:1,name:"小米",price:"2000"},
//             {id:2,name:"红米",price:"3000"},
//             {id:3,name:"华为",price:"4000"},
//             {id:4,name:"苹果",price:"5000"}
//         ];
//         // console.log(renderData);
//         var tbody=document.querySelector("tbody");
//         renderData(data);
//         function renderData(data){
//             data.forEach(function(value){
//                 var tr = document.createElement("tr");
//                 var td1 = document.createElement("td");
//                     td1.innerText=value.id;
//                     tr.appendChild(td1);
//                 var td2 = document.createElement("td");
//                     td2.innerText=value.name;
//                     tr.appendChild(td2);                
//                 var td3 = document.createElement("td");
//                     td3.innerText=value.price;
//                     tr.appendChild(td3);
//                     tbody.appendChild(tr);
//             })
//         }
//   

// <!DOCTYPE html>
// <html lang="en">
// <head>
//     <meta charset="UTF-8">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <title>Document</title>
// </head>
// <body>
//     <script>
//         function a (){
//             this.name="james";
//         }
//         var obj={
//             age:36
//         };
//         a.prototype=obj;
//         a.prototype.buy=function(){
//             console.log("这是a里面新加的buy函数");
//         }
//         var b=new a();

//         console.log("这是a",a,"这是b",b);
//         console.log(a.constructor,"b的",b.constructor)

//         console.log(a.__proto,a.prototype)





// <!DOCTYPE html>
// <html lang="en">
// <head>
//     <meta charset="UTF-8">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <title>练习</title>
//     <style>
//         div{
//             width:500px;
//             margin:0 auto;
//         }
//     </style>
// </head>
// <body>
//     <div>
//         <input type="text" placeholder="请输入查询产品的名称" id="pname"/>
//         <button id="psearch">搜索</button>
//         <table>
//             <thead>
//                 <tr>
//                     <th>编号</th>
//                     <th>产品名称</th>
//                     <th>产品价格</th>
//                 </tr>
//             </thead>
//             <tbody id="pbody">
                
//             </tbody>
//         </table>
//     </div>
//     <div>
//         <input type="text" placeholder="请输入姓名" id="username"/>
//         <button id="usersearch">搜索</button>
//         <table>
//             <thead>
//                 <tr>
//                     <th>编号</th>
//                     <th>姓名</th>
//                     <th>年齡</th>
//                     <th>性別</th>
//                 </tr>
//             </thead>
//             <tbody id="usertabody">
                
//             </tbody>
//         </table>
//     </div>
//     <script>
//         var data=[
//             {id:1,name:"华为",price:3500},
//             {id:2,name:"荣耀",price:6500},
//             {id:3,name:"小米",price:5500},
//             {id:4,name:"红米",price:4500},
//             {id:5,name:"oppo",price:3500},
//             {id:6,name:"Iphone",price:4000},
//             {id:7,name:"苹果",price:5000}
//         ];

//         var userData=[
//             {id:1,name:"Trump",age:70,gender:'男'},
//             {id:2,name:"Biden",age:65,gender:'男'},
//             {id:3,name:"xiaowu",age:50,gender:'男'},
//             {id:4,name:"小王",age:45,gender:'女'},
//             {id:5,name:"大王",age:60,gender:'女'},
//             {id:6,name:"悟空",age:30,gender:'女'},
//             {id:7,name:"八戒",age:35,gender:'男'}
//         ];
//         /*
//             函数: search函数   renderData函数   ===> 對象的方法
//             变化的变量: data  tbody button input  ===> 做成了的属性

//             把一个功能封装成 对象 或 函数:
//             封装函数:
//                 把变化的数据 做成参数, 如果需要函数的最终运行 就 return 返回结果;
//             封装对象:
//                 把变量做成对象的属性.
//                 把函数变成对象的方法. (注意 this的引用的问题)
//         */
//         function SearchTable(){//属性.
//             this.data=[];
//             this.tbody=null;//填充数据的表格主体.
//             this.button=null;//搜索按钮元素对象.
//             this.input=null;//输入框元素对象.
//         }
//         SearchTable.prototype.init=function(){//初始化
//             var o=this;//給searchTable對象一個別名
//             this.renderData(this.data);//先填充数据表格
//             this.button.onclick=function(){//点击搜索按钮
//                 o.search(); // this.search();
//             }
//             this.input.addEventListener('keyup',function(){//输入框的键盘弹起事件
//                 o.search();  // this.search();
//             });
//         }
//         SearchTable.prototype.search=function(){
//             var pname=this.input.value;//鼠标点击的时候获取产品名称
//                     var result=this.data.filter(function(value){//过滤数组 
//                         if(value.name.indexOf(pname)>=0){//判断循环出来每一项里面的名称属性有没有 pname 如果有返回true. 存储 filter的返回数组里面
//                             return true; //filter函数里面 如果返回true 该条结果存入返回数组里面
//                         }
//                         return false;//filter函数里面 如果返回false, 该条结果不存入返回数组里面
//                     });
//                     this.tbody.innerHTML='';//把原来tbody里面的html先清空
//                     this.renderData(result);//把筛选的结果重新写入tbody
//         }
//         SearchTable.prototype.renderData=function(data){
//             var o=this;//给searchTable的this对象做一个别名
//             data.forEach(function(value){
//                 // console.log(this);  this  代表是window
//                 var tr=document.createElement('tr');
//                 for(var i in value){//循环对象
//                     var td1=document.createElement('td');
//                         td1.innerText=value[i];
//                         tr.appendChild(td1);
//                 }
//                 o.tbody.appendChild(tr);
//                 // var td1=document.createElement('td');
//                 //     td1.innerText=value.id;
//                 //     tr.appendChild(td1);

//                 // var td2=document.createElement('td');
//                 // td2.innerText=value.name;
//                 //     tr.appendChild(td2);

//                 // var td3=document.createElement('td');
//                 // td3.innerText=value.price;
//                 //     tr.appendChild(td3);
               
//             });
//         }
//         var st=new SearchTable();
//             st.data=data;//对象的数据属性data 赋值.
//             st.tbody=document.querySelector('#pbody');//给对象tbody赋值 填充表格主体
//             st.button=document.querySelector('#psearch');
//             st.input=document.querySelector('#pname');
//             st.init();//调用对象init 初始化
//        var usert=new SearchTable();
//             usert.data=userData;//对象的数据属性data 赋值.
//             usert.tbody=document.querySelector('#usertabody');//给对象tbody赋值 填充表格主体
//             usert.button=document.querySelector('#usersearch');
//             usert.input=document.querySelector('#username');
//             usert.init();//调用对象init 初始化


// <!DOCTYPE html>
// <html lang="en">
// <head>
//     <meta charset="UTF-8">
//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
//     <title>Document</title>
// </head>
// <body>
//     <script>

//         function People(){
//             this.name="";
//             this.age="";
//             //this 代表 当前创建的对象
//             this.buy=function(){

//             }
//         }
//         var p1=new People();
//         var p2=new People();

//     </script>
// </body>
// </html>



